<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>记住用户名</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			.box {
				width: 400px;
				height: 40px;
				margin: 20px auto;
				background-color: pink;
			}
			.box .username_label {
				display: inline-block;
				width: 80px;
				height: 40px;
				line-height: 40px;
				text-align: left;
			}
			.username {
				
				width: 150px;
				height: 30px;
				border: 0;
				outline: none;
				vertical-align: middle;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<label for="username" class="username_label">用户名：</label>
			<input type="text" name="username" id="username" class="username" value="" />
			<input type="checkbox" class="remember" name="" id="" value="" /> &nbsp;记住用户名
		</div>
		<script type="text/javascript">
			var ipt = document.querySelector('.username');
			var rem = document.querySelector('.remember');
			//判断用户之前有没有选择记住用户名
			if(localStorage.getItem('username')) {
				//有勾选
				ipt.value = localStorage.getItem('username');
				rem.checked = true;
			}
			//使用change事件
			rem.addEventListener('change',function() {
				if(rem.checked) {
				//后来勾选的
				//保存到本地存储中
				localStorage.setItem('username',ipt.value);
				}else {
					//不勾选
					//删除本地存储中的username
					localStorage.removeItem('username');
				}
			})
		</script>
	</body>
</html>
